<template>
    <div class="main">
        <div class="login">
            <div class="form">
                <h1>商城管理系统</h1>
                <el-form style="padding: 10px" class="login-form" :model="lfm" ref="lfRef" :rules="rules">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item  prop="username" :label-width="80">
                                <el-input placeholder="请输入用户名" v-model="lfm.username" style="height: 40px;" 
                                autocomplete="off" :prefix-icon="User"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item prop="password" :label-width="80">
                                <el-input type="password" show-password placeholder="请输入密码" 
                                v-model="lfm.password" style="height: 40px" :prefix-icon="Lock"
                                autocomplete="off" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="14">
                            <el-form-item  prop="captcha" :label-width="80">
                                <el-input placeholder="请输入验证码" v-model="lfm.captcha"
                                 maxlength="4" minength="4" style="
                                 height: 40px;" :prefix-icon="Message"
                                    autocomplete="off" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <img class="captcha" :src="captchaUrl" style="height: 40px;" @click="refresh">
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-button type="primary" round class="login-btn" @click="Login">登录</el-button>
                        </el-col>
                    </el-row>
                   <el-row>
  <el-col :span="24">
    <el-button type="primary" round class="login-btn" @click="goRegister">注册</el-button>
  </el-col>
</el-row>

                </el-form>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { login } from "@/api/AdminApi";
import { save as saveToken } from "@/api/JwtApi";
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import {User,Lock,Message} from '@element-plus/icons-vue';
const router = useRouter();
function goRegister() {
  router.push("/register");
}
const lfm = ref({
  username: "test",
  password: "123",
  captcha: "",
  captchaId: ""
})
const lfRef = ref(null);  

async function Login() {
    lfRef.value.validate(async success => {
        if (success) {
            // 打印用户名、密码、验证码
            console.log("用户名:", lfm.value.username);
            console.log("密码:", lfm.value.password);
            console.log("验证码:", lfm.value.captcha);

        

            let resp = await login(lfm.value);

            console.log("后端返回 resp:", resp);
            if (resp.code === '200')
            {
                saveToken(resp.jwt);
                router.push("/index/view");
            } else {
                ElMessage({
                    message: resp.msg || "登录失败",
                    type: "error"
                });
            }
        }
    });
}

const captchaUrl = ref("/api/user-api/api/v1/user/captcha");
//刷新验证码
function refresh() {
    let captchaId = Math.random();
    lfm.value.captchaId = captchaId;
    captchaUrl.value = "/api/user-api/api/v1/user/captcha?id=" + captchaId;
    console.log(captchaUrl.value)
}
onMounted(()=>{
    refresh();
})
const rules = ref({
    username: [
        { required: true, message: "用户名不可为空" }
    ],
    password: [
        { required: true, message: "密码不可为空" }
    ],
    captcha: [
        { required: true, message: "验证码不可为空" },
        { min: 4, max: 4, message: "验证码只能是4位" }
    ]
});
</script>
<style scoped>
.main {
    height: 100%;
    background: url("@/assets/login.png") no-repeat center center/cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login {
    width: 500px;
    height: 350px;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    z-index: 1000;
}
.form {
    width: 100%; 
    text-align: center; 
}
.login-form {
    width: 80%; 
    margin: 0 left; 
}
.login h1 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px; 
}
.login-btn {
    width: 50%;
    height: 50px;
    background-color: #ccc;
    color: black;
    font-size: 18px;
}
.captcha {
    cursor: pointer;
    width:160px;
}
</style>